
import {Modal} from 'ant-design-vue'

export default {
  components: {},
  props: {
    /**
     * 数据格式： [{id:String, name:String}, ]
     */
    data: Array,
    /**
     * 级联面板左框配置
     * 数据结构：{dataUrl:String, queryParams:Object, casField:String, title:String}
     * dataUrl:查询【级联数据选项】的远程接口，每组数据有独立的查询接口；
     * queryParams: 查询【级联数据选项】的条件参数，每组级联数据可以来自不同的表；
     * casField: 级联字段，关联到前一组数据表的条件字段，查询当前组的级联数据时需要以前一组级联数据的选中值作为查询条件，该字段即为条件字段；
     * title: 级联数据独立的标题；
     * emptyText: 无数据选项时显示的文字；
     */
    panel1: {
      type: Object,
      default: () => {
        return {
          dataUrl: '',
          queryParams: {},
          casField: '',
          title: '',
          emptyText: '',
        }
      }
    },
    panel2: {
      type: Object,
      default: () => {
        return {
          dataUrl: '',
          queryParams: {},
          casField: '',
          title: '',
          emptyText: '',
        }
      }
    },
    /**
     * 中间表选项；
     * 数据结构：{dataUrl:String, queryParams:Object, leftField:String, rightField1:String, rightField2:String, saveUrl:String}
     * dataUrl: 中间表数据的查询接口；
     * queryParams: 中间表数据的查询条件；
     * leftField: 中间表字段名，字段关联到左表（即当前主表）；
     * leftValue: 中间表字段值，数据关联到左表（即当前主表）；
     * rightField1: 中间表字段，关联到右表1的ID，右表可以有多个，此处为关联到级联面板数据表1的字段；
     * rightNameField1: 中间表冗余字段，关联到右表1的 name；
     * rightField2: 中间表字段，关联到右表2，右表可以有多个，此处为关联到级联面板数据表2的字段；
     * rightNameField2: 中间表冗余字段，关联到右表2的 name；
     * saveUrl: 中间表数据保存接口；保存时提交的表单数据结构为：{leftField: '', rightField1: '', rightField2: ''}；
     * emptyText: 无数据选项时显示的文字；
     */
    results: Object,
    /**
     * TODO: 是否将两级数据作为树结构返回？即第一级数据为根节点，第二级数据为子节点。
     * 目前默认为 false，即只返回第二级数据，用来选人。
     */
    treeResult: Boolean,
    multiple: Boolean, // 是否支持多选？只对最后一级生效，前面几级只能单选。
    maxTagCount: Number, // 用于多选的情况，
    height: Number,
    width: Number,
    title: String,
  },
  data() {
    return {
      // /**
      //  * 弹窗的显示状态；
      //  */
      // visible : false,
      /**
       * 后台数据：即后台查询到的数据，需转换成字段数据(fieldData)才能在字段中显示；
       */
      dataRows: [],
      /**
       * 弹窗数据：弹窗时传递到弹窗中的数据，数据结构：[{id:String, name:String, children:Array}, ...]；
       * 弹窗时会将字段数据(fieldData)转换成弹窗数据(cascaderData)；
       */
      cascaderData: [],
      /**
       * 字段数据：即在表单字段中显示的数据，数据结构：[{id:String, name:String, children:Array}, ...]；
       * 后台查询的数据(dataRows)，会转换成字段数据(fieldData)；
       * 弹窗返回的数据，会转换成字段数据(fieldData)；
       */
      fieldData: [],
      queryDataRows: window.$debounce(this._queryDataRows),
      loading: false,
      modal: null
    }
  },
  mounted() {
    this.init()
  },
  watch: {
    results: {
      handler: function () {
        this.init()
      },
      deep: true
    },
    data() {
      this.fieldData = this.data || []
    }
  },
  methods: {
    init() {
      this.fieldData = this.data || []
      if (!this.$slots.default) {
        this.queryDataRows()
      }
    },
    save(array) {
      if (!this.results || !this.results.leftValue) {
        return
      }
      const id = this.results.leftValue
      const formDatas = []
      let id1, id2, formData
      const leftFld = this.results.leftField
      const rightFld1 = this.results.rightField1
      const rightFld2 = this.results.rightField2
      array.forEach(node1 => {
        id1 = node1.id
        node1.children.forEach(node2 => {
          id2 = node2.id
          // 创建单条数据
          formData = {}
          formData[leftFld] = id
          formData[rightFld1] = id1
          formData[rightFld2] = id2
          //
          formDatas.push(formData)
        })
      })
      let deleteParams = {}
      deleteParams[this.results.leftField] = this.results.leftValue

      this.$http.post(this.results.saveUrl, {
        deleteParams: deleteParams,
        datas: formDatas,
      }).then((rs) => {
        const result = rs.data
        if (!result.success) {
          this.$message.error(result.message)
        }
      })
    },
    _queryDataRows(callback) {
      if (!this.results || !this.results.leftValue) {
        if (callback)
          callback()
        return
      }
      let params = {}
      params[this.results.leftField] = this.results.leftValue
      if (this.results.queryParams) {
        for (let key in this.results.queryParams) {
          params[key] = this.results.queryParams[key]
        }
      }
      this.loading = true
      this.$http.post(this.results.dataUrl, params).then((rs) => {
        this.loading = false
        const result = rs.data
        if (result.success) {
          this.dataRows = result.data
        } else {
          this.dataRows = []
        }
        this.dataRows2FieldData(this.dataRows)
        if (callback)
          callback()
      })
    },
    _findNode(array, id) {
      for (let node of array) {
        if (node.id === id)
          return node
      }
      return null
    },
    /**
     * 将后台数据转换成字段数据
     */
    dataRows2FieldData(dataRows) {
      const rightFld1 = this.results.rightField1
      const rightFld2 = this.results.rightField2
      const rightNameFld1 = this.results.rightNameField1
      const rightNameFld2 = this.results.rightNameField2
      let array = [], id1, id2, name1, name2
      dataRows.forEach(row => {
        id1 = row[rightFld1]
        id2 = row[rightFld2]
        name2 = row[rightNameFld2]
        name1 = row[rightNameFld1]
        //
        let node1 = this._findNode(array, id1)
        if (!node1) {
          node1 = {id: id1, name: name1, children: []}
          array.push(node1)
        }
        node1.children.push({id: id2, name: name2})
      })
      this.fieldData = array
    },
    doOpenDialog() {
      this._openDialog()
      this.queryDataRows(() => {
        this._updateDialog()
      })
    },
    _openDialog() {
      this.modal = Modal.confirm({
        class: 'dmform-modal dmform-modal-onlybody',
        footer: null,
        width: this.width || 800,
        maskClosable: true,
        closable: true,
        title: this.title,
      })
    },
    _updateDialog() {
      this.cascaderData = this.copy(this.fieldData)
      this.modal.update({
        content: h => h('ListCascader', {
          props: {
            panel1: this.panel1,
            panel2: this.panel2,
            height: 300,
            value: this.cascaderData,
            multiple: this.multiple,
          },
          on: {
            onConfirm: this.doConfirm,
            onCancel: this.doCancel
          }
        })
      })
    },
    copy(array) {
      let _array = []
      for (let row of array) {
        let newRow = {id: row.id, name: row.name}
        _array.push(newRow)
      }
      return _array
    },
    doConfirm(rows, keys) {
      // console.log('doConfirm: ', JSON.stringify(rows))
      //
      // this.visible = false
      this.fieldData = this.copy(rows)
      this.save(rows)
      if (this.multiple) {
        this.$emit('onConfirm', {
          rows: rows,
          keys: keys
        })
      } else {
        if (rows.length == 1) {
          this.$emit('onConfirm', {
            rows: rows[0],
            keys: keys[0]
          })
        }
      }
      //
      if (this.modal) {
        this.modal.destroy()
      }
    },
    doCancel() {
      console.log('doCancel...')
      //
      // this.visible = false
      this.$emit('onCancel')
      if (this.modal) {
        this.modal.destroy()
      }
    }
  }
}